import React from 'react';
import { ColorPicker } from 'antd';
import { useNavigate } from 'react-router-dom';
import { colors, ColorButtonProps } from './ColorSelector.types';

const ColorButton: React.FC<ColorButtonProps> = ({ color, onClick }) => {
    return (
        <button style={{ backgroundColor: color, border: 'none', padding: '10px', margin: '5px', cursor: 'pointer' }} onClick={onClick}>
            {/* 这里可以添加颜色的预览或名称，但为简单起见，我们只使用背景色 */}
        </button>
    );
};

const ColorSelector: React.FC = () => {
    const navigate = useNavigate();
    const handleColorClick = (color: string) => {
        console.log(`Selected color: ${color}`);
        // 这里可以添加更多的逻辑，比如更新父组件的状态
        navigate('/colorsearch');
    };

    return (
        <div style={{ display: 'flex' }}>
            <div className='C1'>
                {colors.map(color => (
                    <ColorButton key={color} color={color} onClick={() => handleColorClick(color)} />
                ))}
            </div>
            <div className='C2' style={{ display: 'flex' }}>
                <div>
                    <ColorPicker defaultValue="#ccc" style={{ marginTop: '4px' }} />
                </div>
                <div style={{ marginTop: '6px', marginLeft: '10px' }}>点击左侧色块，选取不同颜色试试吧~</div>
            </div>
        </div>
    );
};

export default ColorSelector;